<!DOCTYPE html>
<html lang="ru">
    <head>
        <style>
            #container {
                height: 200px;
                width: 600px;
                background: #F5F5F5;

            }

            ul{
                list-style: none;
                text-transform: uppercase;

            }

            #container >ul > li {
                float: left;
                margin: 20px;
                position: relative;

                padding: 5px;
            }

            #container >ul > li > a {
                border: 1px solid black;

            }

            #container > ul > li > ul {
                text-transform: lowercase;
                /*display: none;*/
                border: 1px solid black;
            }

            #container > ul > li:hover > ul {

                display: block;
            }




        </style>


    </head>
    <body>

        <div id="container">
            <ul>
                <li><a>fisrt</a>
                    <ul>
                        <li><a>sec:first</a></li>
                        <li><a>sec:second</a></li>
                    </ul>
                </li>
                <li><a>second</a></li>

                <li><a>third</a>
                    <ul>
                        <li><a>sec:first</a></li>
                        <li><a>sec:second</a></li>
                    </ul>

                </li>



            </ul>


        </div>



    </body>


</html>

